<template>
  <div class="msgLogin">
    <div class="iconfont icon-diannaojiaobiao" @click="handleOK"></div>
    <h1>短信登入</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="phonenumber">
        <el-input
          type="text"
          v-model="ruleForm.phonenumber"
          autocomplete="off"
        ></el-input>
        <span @click="sendSms" class="captcha-svg" style="color:#888; font-weight:bolder;text-decoration:underline; user-select:none;" v-text="msg">

        </span>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha" >
        <el-input v-model="ruleForm.captcha" type="text" class="ok"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as api from "@/api/users"
import storage from "@/utils/storage.js"
var validateCaptcha = (rule, value, callback) => {
  if (value.length !== 5) {
    callback("验证码必须是5位");
  } else {
    callback();
  }
};
var validatephonenumber = (rule, value, callback) => {
  let uPattern =
    /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("填入正确手机号");
  }
};

export default {
  data() {
    return {
      flag:true,//一个开关
      msg:'点击发送验证码',
      
      ruleForm: {
        phonenumber: "",

        captcha: "",
      },
      rules: {
        phonenumber: [{ validator: validatephonenumber, trigger: "blur" }],

        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    }
  },
  methods: {
    async sendSms(){
      if(this.flag){
        this.flag = false;//关掉
        //调用接口，获取手机验证码
        let res = await api.getSmsCode(this.ruleForm.phonenumber)
        console.log(res);

        let delay = 5;
        this.msg = `${delay}秒后重新发送`
        let interval = setInterval(()=>{
          delay--
        if(delay<1){
          this.msg = '点击发送验证码'
          clearInterval(interval)
          //重新把开关打开
          this.flag = true;
        }else{
          this.msg = `${delay}秒后重新发送`
        }
        },1000)
      }
    },

    async submitForm() {
      let res = await api.smsLogin(this.ruleForm.captcha)
      console.log(res);
      storage.storageUserInfo(res.data)

      this.$router.push('/home')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleOK() {
      this.$parent.one = true;
      this.$parent.two = false;
    },
  },
};
</script>
<style lang='less' scoped>
.msgLogin {
  border: 1px solid white !important;

  position: fixed;
  right: 50px;
  top: 200px;
  width: 400px;
  height: 400px;
  color: white !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: rgba(0, 0, 0, 0.5);
  /deep/.icon-diannaojiaobiao {
    font-size: 60px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .demo-ruleForm {
    width: 300px;
    margin-right: 80px;
    .el-form-item {
      width: 270px !important;
      /deep/.el-form-item__label {
        color: white !important;
          .el-input {
          width:150px;
            
        }
      }
      
      .el-button {
        width: 100%;
      }
    }
  }
}
// .el-form-item:nth-of-type(3) .el-input {
// width: 90px !important;
// }
// /deep/.el-input__inner{
//   width:10px !important;
// }
</style>
